<template>
  <div>
    <header-area :has-search="false" />
    <div class="chart-container">
      <el-row :gutter="20">
        <el-col :span="7">
          <div>
            <el-divider content-position="left"
              ><i class="el-icon-pie-chart"></i
            ></el-divider>
            <div class="title">风险藏品的平台分布</div>
            <pie-chart :chart-data="pieData" />
            <el-divider content-position="right"
              ><i class="el-icon-pie-chart"></i
            ></el-divider>
          </div>
          <div class="bar">
            <el-divider content-position="left"
              ><i class="el-icon-sell"></i
            ></el-divider>
            <div class="title">新增风险藏品数</div>
            <add-chart :chart-data="addData" />
            <el-divider content-position="right"
              ><i class="el-icon-sell"></i
            ></el-divider>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="placeholder">hhh</div>
          <div class="middle">
            <el-radio-group v-model="country">
              <el-radio-button label="China">中国</el-radio-button>
              <el-radio-button label="America">美国</el-radio-button>
            </el-radio-group>
            <map-chart :chart-data="mapData" :country="country" />
          </div>
        </el-col>
        <el-col class="right-chart" :span="7">
          <div>
            <el-divider content-position="right"
              ><i class="el-icon-data-analysis"></i
            ></el-divider>
            <div class="title">风险种类分布</div>
            <bar-chart :chart-data="barData" />
            <el-divider content-position="left"
              ><i class="el-icon-data-analysis"></i
            ></el-divider>
          </div>
          <div class="bar">
            <el-divider content-position="right"
              ><i class="el-icon-data-line"></i
            ></el-divider>
            <div class="title">近一个月风险藏品总趋势</div>
            <line-chart :chart-data="lineData" />
            <el-divider content-position="left"
              ><i class="el-icon-data-line"></i
            ></el-divider>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import HeaderArea from "../components/HeaderArea.vue";
import PieChart from "./components/PieChart";
import LineChart from "./components/LineChart";
import BarChart from "./components/BarChart";
import AddChart from "./components/AddChart";
import MapChart from "./components/MapChart";

/* const pieData = [
  { value: 43, name: "opensea" },
  { value: 27, name: "草方格" },
  { value: 14, name: "ODIN META" },
  { value: 32, name: "BYBIT" },
];
const lineData = [
  0, 12, 18, 22, 30, 33, 33, 44, 46, 55, 60, 66, 71, 80, 80, 80, 98, 100, 100,
  103, 109, 111, 123, 140, 145, 154, 160, 170, 184, 193, 201,
];
const barData = [94, 90, 86, 78, 69,80];
const addData = [5, 8, 12, 6, 2, 10, 4]; */
/* const chinaMapData = [
  { name: "陕西", value: 123 },
  { name: "江西", value: 5 },
  { name: "贵州", value: 1111 },
];
const americaMapData = [
  { name: "科罗拉多州", value: 123 },
  { name: "艾奥瓦州", value: 5 },
  { name: "田纳西州", value: 1111 },
]; */
export default {
  components: { HeaderArea, PieChart, LineChart, BarChart, AddChart, MapChart },

  data() {
    return {
      pieData: [],
      lineData: [],
      barData: [],
      addData: [],
      chinaMapData: [],
      americaMapData: [],
      country: "America",
    };
  },

  computed: {
    mapData() {
      return this.country == "China" ? this.chinaMapData : this.americaMapData;
    },
  },

  methods: {
    getBarData() {
      let barData = [0, 0, 0, 0, 0, 0];
      this.$api.nft.getRiskNum().then((res) => {
        console.log(res);
        let sum = res.total;
        // for(var i in res.results){
        //   // riskData[res.results[i].risk_id-1]=res.results[i].num
        //   sum +=res.results[i].num
        // }
        for (var i in res.results) {
          barData[res.results[i].risk_id - 1] = (
            (res.results[i].num / sum) *
            100
          ).toFixed();
          // sum +=res.results[i].num
        }
        this.barData = barData;
        console.log("fetch barData:", this.barData);
      });
    },
  },
  created() {},

  mounted() {
    this.$api.nft.getRecentlyAddedRisk().then((res) => {
      this.addData = res.results.week;
    });

    this.$api.nft.getRiskDistribution().then((res) => {
      // console.log("getRiskDistribution",res)
      this.pieData = res.results;

      let wuHanRisk = 0;
      let guangZhouRisk = 0;
      let newYorkRisk = 0;
      let californiaRisk = 0;

      let wuHanTotal = 0;
      let guangZhouTotal = 0;
      let newYorkTotal = 0;
      let californiaTotal = 0;

      res.results.forEach((item) => {
        switch (item.platform) {
          case "opensea":
            newYorkRisk = item.num;
            newYorkTotal = item.total_num;
            break;
          case "zora":
            californiaRisk = item.num;
            californiaTotal = item.total_num;
            break;
          case "hdmeta":
            guangZhouRisk = item.num;
            guangZhouTotal = item.total_num;
            break;
          case "中艺数藏":
            wuHanRisk = item.num;
            wuHanTotal = item.total_num;
            break;
        }
      });
      this.chinaMapData.push({
        name: "武汉",
        value: wuHanRisk,
        total: wuHanTotal,
      });
      this.chinaMapData.push({
        name: "广东",
        value: guangZhouRisk,
        total: guangZhouTotal,
      });
      this.americaMapData.push({
        name: "纽约州",
        value: newYorkRisk,
        total: newYorkTotal,
      });
      this.americaMapData.push({
        name: "加利福尼亚州",
        value: californiaRisk,
        total: californiaTotal,
      });
      console.log("americaMapData",this.americaMapData)
    });

    this.getBarData();

    this.$api.nft.getRiskTrend().then((res) => {
      /* let data = res.result;

      let xData = [];
      let yData = [];
      for (var i in data) {
        xData.push(data[i].date);
        yData.push(data[i].num);
      }

      this.lineData = {
        x: xData,
        y: yData,
      }; */
      this.lineData = res.result;
    });
  },
};
</script>

<style lang='less' scoped>
.chart-container {
  height: 100%;
  margin: 16px;

  .title {
    text-align: center;
    font-size: 16px;
    color: darkslategrey;
    margin-bottom: 8px;
  }

  .placeholder {
    width: 100%;
    opacity: 0;
  }

  .middle {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .bar {
    margin-top: 50px;
  }
}
</style>